تاريخچه وب و اينترنت در جهان

1958- آيزنهاور رئيس جمهور وقت آمريکا دستور اختصاص رديفي در بودجه نيروي هوايي آمريکا جهت تاسيس ARPA (آژانس تحقيقاتي پيشرفته) را صادر نمود.

1961 - کلينراک پروفسور علوم کامپيوتر در دانشگاه  UCLA، اولين مقاله را تحت عنوان "جريان اطلاعات در شبکه هاي بزرگ ارتباطي"  نوشت.

1962- اولين مقاله در مورد مفهوم اينترنت تحت عنوان ?ارتباط کامپـيوترهاي روي شبـکه? تـوسـط کلارک و ليکلايدر نوشه شد.

1964- باران اولين مقاله را تحت عنوان ?شبکه هاي ارتباطي توزيع شده? نوشت.

1965- آزمايش اولين شبکه ساخته شده بوسيله Larry Roberts در آزمايشگاه ايالتي MIT: دو کامپيوتر با استفاده از تکنولوژي Packet switching با يکديگر ارتباط برقرار کردند.

1966- پروژه ARPA به سرپرستي لاري رابرتز آغاز شد.

1972- اولين برنامه هاي استفاده از e-mail بوسيله راي تاميلسون براي ARPA نوشته شد و علامت @ (at) به معناي ?در?  انتخاب شد.

1974- اولين طراحي هاي پروتکل TCP توسط کرف و کان منتشر گرديد.

1976- ملکه اليزابت دوم يک e-mail فرستاد.

1978-  به TCP و TCP/ IP تقسيم شد.

1979- کميته کنترل پيکره بندي اينترنت (ICCB) را تاسيس نمود.

1980- سيستم هاي ARPANET به دليل وجود يک ويروس در پيام هاي الکترونيکي از کار افتاد.

1982- پروتکل TCP/IP، بعنوان استاندارد مورد استفاده وزارت دفاع آمريکا تعيين شد.

1983- Domain Name System) DNS ) ابداع گريد و پسوندهاي net,.org,.mil,.com,.gov .edu,.int بوجود آمدند.

1985- "Symbolic.com"بعنوان اولين Domain ثبت شد.

1986- 50000 ميزبان در اينترنت حضور دارند. ارتباط e-mail بين آلمان و چين برقرار شد.

1988- گفتگوي مبتني بر اينترنت (IRC ) تعريف و تدوين گرديد.

1989- در اين سال 000 /100 ميزبان در اينترنت قرار دارند.

1990- اولين سرويس تجاري اينترنت از طريق خطوط تلفن راه اندازي شد. شبکه ARPAnet به کار خود خاتمه داد- ?تيم برنرزلي ? سيستم جهاني web) www) را ابداع نمود. سيستم Gopher ارايه شد.

1996- نام "TV.com" به مبلغ 000 /15 دلار به CNET فروخته شد. ميکروسافت و نت اسکيپ دو رقيب اصلي در عرصه توليد مرورگر شدند- تلفن اينترنتي جهاني شد- نخست وزير مالزي، ماهاتير محمد به مدت 10 دقيقه از طريق اينترنت با ياسر عرفات و رئيس جمهور فيليپين گفتگو کرد- کليه Domain هايي که بدون پرداخت هزينه قبلا ثبت گرديده بودند، حذف شدند.

1997- نام "business.com" به مبلغ 000 /150 دلار فروخته شد. تعداد نام سايت ها در پايگاه جستجوي whois از مرز 000 /100 گذشت.

1998- 2ميليون نام در Network Soloutions ثبت گرديد- وزارت اقتصاد آمريکا پيشنهاد داد DNS از مالکيت دولتي خـارج شـده و بـه بـخـش خصوصي واگذار شود.

1999- شرکت American On Line) AOL)، نت اسکيپ را خريد- مايکروسافت و نت اسکيپ تقريبا 100% بازار مرورگرها را در اختيار گرفتند- Napster بوجود آمد- بدين ترتيب و با ايجاد امکان Share کردن فايلها، جنگ کپي رايت در جهان موسيقي بالا گرفت- در اين سال برخي شرکتهاي سرويس دهنده اينترنت به کاربري که قرارداد اشتراک طولاني مدت امضا مي کرد، کامپيوتر مجاني هديه مي کردند.

 

با سلام

امروزه بحث وب و صفحات وب شايد بحث روز در علم كامپيوتر باشد با جدي تر شدن مباحث الكترونيكي مانند بانكداري الكترونيكي دانشگاه

الكترونيكي و حتي دولت الكترونيكي اين مبحث روز بروز پيچيده تر مي شود.

در اين ميان مبحث طراحي صفحات وب نيز هر روز گسترده تر مي شود .و شركتهاي گوناگون هم

نرم افزارهاي گوناگوني را براي اين منظور به بازار عرضه كرده اند

طراحان وب باز كرده است

دفاع مي كنند البته بنده قصد نفي Front Page از برنامه Dreamweaver مقايسه اين دو برنامه سر سختانه و بدون تسلط كامل بر جنبه هاي

اين برنامه خوش دست را ندارم منتها عرض ميكنم امكاناتي كه در دريم ويور در اختيار شماست به هيچ وجه قابل مقايسه با برنامه فرونت پيج

نيست حال بنده يك چشم اندازي را پيش روي شما قرار مي دهم تا بهتر بتوانيد قضاوت كنيد و در جوا ب اين دوستان كه علتهاي برتري دريم

ويور را از شما سوال مي كنند دلائل قابل قبولي ارائه كنيد

سالهاست فضاي كد نويسي راحت را فراهم كرده كدهاي توليد شده بر حسب شماره سطر دسته بندي شده اند و به Dreamweaver - ?

از ورژن Front page محض سلكت كردن بخشي در كادر اصلي كدهاي آن بخش هم در قسمت كد به حالت انتخاب در مي آيد ولي برنامه

???? اين امكان را در برنامه گنجانده است

خارجي توليد مي شوند css را داريد اين گونه كدها هم بصورت فايلهايي با پسوند CSS براحتي امكان ايجاد كدهاي Dreamweaver ? در

و هم بصورت داخلي اما فرونت پيج اين امكان را هنوز ندارد

منطبق بر دو مرورگر اينترنت اكسپلرر و نت اسكيپ توليد مي شود اما فرونت پيج كدها HTML كدهاي توليد شده Dreamweaver ? در

را منحصرا براي مرورگر خود مايكروسافت توليد ميكند و غالب صفحات توليدي فرونت پيج در مرورگر نت اسكيپ با مشكل نمايش داد ه

ميشود

? دريم ويور مي تواند در جاهايي كه لازم است كدهاي جاوا اسكريپ را خودكار توليد كند تا پويايي را بين صفحه و كاربر ايجاد كند ( اين

مطلب در قسمتهاي بعدي آموزش عنوان مي شود ) اما فرونت پيج اين امكان را ندارد

? دريم ويور فضاي بسيار راحتي را براي طراحي لايه هاي گوناگون تدارك ديده اين لايه ها طوري توليد مي شود كه در هردو مرورگر نام

برده براحتي نمايش داده شوند

? دريم ويور مي تواند دكمه هاي فلش را در خود توليد كند كه جهت زيبايي كار بسيار مفيد هستند اما فرونت پيج اين امكان را ندارد

را عرضه كرده كه مقداري از امكانات اين برنامه در دريم ويور هم گنجانده شده است Flash البته ماكرومديا براي اين كار برنامه پر قدرت

? مديريت سايت با دريم ويور بسيار راحتتر و ساده تر از فرونت پيج است

توليد كنيد ( البته با محدوديت ) اما فرونت پيج اين امكان را ندارد php را تحت يك فايل PHP ?? - در دريم ويور مي توانيد كدهاي

گنجانده و نه در Visual Studio . NET را داريد اما مايكروسافت اين امكان را در بسته ASP ?? - در دريم ويور امكان توليد كدهاي

فرونت پيج

را داريد اما در فرونت پيج خير Java Script وVB script ?? در دريم ويور امكان توليد كدهاي

است البته ماكرومديا Online ?? اما بهترين و شايد مهمتر ين مزيت اين برنامه امكان متصل ساختن صفحات وب توليدي با بانكهاي اطلاعاتي

را عرضه كرده كه مقداري از امكانات آن در اين جا هم گنجانده شده به نظر UltraDev براي اين منظور هم برنامه فوق العاده بي نظير

مي رسد هدف ماكرومديا از گنجاندن مق داري از امكانات ساير برنامه ها يش در اين برنامه ترغيب استفاده كنندگان از استفاده و خريد ساير

هم در همين راستاست اما براي ما كه كپي رايت نداريم ميتوانيم Fireworks محصولات اين شركت است كه استفاده از انيميشن هاي توليدي

از ساير برنامه هاي اين شركت استفاده كرده و كارهاي زيباتري را خلق كنيم

?? مزيت بعدي اين برنامه استفاده از جدول رنگ مخصوصي كه طراحان در اين برنامه گنجانده اند است بطوري كه اگر شما از رنگهاي

استاندارد برنامه استفاده كنيد مطمئن باشيد صفحه توليدي شما در تمامي سيستم عامل ها و مرورگرها به همين شكلي د يده ميشود كه آن را

طراحي كرده ايد اما فرونت پيج اين طور نيست ممكن است رنگها در سايت شما در مرورگرهاي سيستم عامل ويندوز خوب باشد اما كاربران

سيستم عامل مكينتاش آن را با رنگي متفاوت ببينند

اما يك سري مزيتهاي فرونت پيج نسبت به دريم ويور

كار با صفحات فارسي در فرونت پيج بسيار راحتتر از دريم ويور است

يك سري امكانات ميتوانيد در سايتتان تعبيه كنيد مانند ( Frontpage Exchange ) در فرونت پيج اگر هاستتان آن را پشتيباني كند

شمارشگر بازديد كننده هاي سايت كه در دريم ويور به آن صورت نمي توانيد

خب حالا كه با مزيتهاي اين برنامه آشنا شديد وقت آن رسيده كه به آموزش اين برنامه بپردازيم

اما شيوه آموزش ما به چه صورت است ما آموزشها را برمبناي سطح كاري تعريف كرديم در ابتدا سطح مقدماتي كه در اين سطح شما با شيوه

اصلي طراحي سايت و توليد صفحات وب درون اين سايت آشنا مي شويد در اين سطح شما ميتوانيد يه صفحه ساده طراحي كنيد يعني حاوي

متنها و جدولها و تصاوير گرافيكي باشد

سطح بعدي سطح متوسطه است در اين سطح شما كار با لايه ها و فريم ها و نيز افزورن صدا و فايلهاي مالتي مديا را به همراه تعدادي گزينه

ديگر فرا ميگيريد

 

در شكل ابتدايي آن Java Script و ASP و PHP سطح بعدي سطح حرفه اي است كه شامل كار با ساير گزينه هاي كد بندي برنامه از قبيل

مي شود در اين سطح ما به آموزش اين زبانها نمي پردازيم بلكه روش توليد و كار بر روي گزينه هايي كه برنامه در اختيارمان قرار داده است

متمركز مي شويم شايد در آينده آموزش اين زبانها را هم داشتيم البته اگر درخواست و استقبال باشد

 

 

کدام يک از کدهاي زير بر روي عناصر تاثير ميگذارند؟

 

وقتي به يک عنصر يکسري خصوصيات نسبت مي دهيم، و در يک استايل دهي گروهي يا در جاي ديگري يکسري خصوصيات ديگر براي آن مي نويسيم، از بين خصوصيات يکسان تمامي آنها به ارث برده ميشود و از بين ساير خصوصيات آن ويژگي هايي به ارث مي روند که نسبت به ساير دستورات ديرتر و يا به عبارتي بعد تر نوشته شده اند و در صفحه استايل دهي پايين تر قرار گرفته اند. با هم به بررسي مثال زير مي پردازيم :

 

 

    h2

    {

    color: blue;

     font-size: medium;

     font-weight: normal;

    }

    h1, h2, h3

    {

     font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;

     background-color: navy;

    color: white;

    }

 

 

در دستورات ابتدايي رنگ نسبت داده شده به تگ h2 آبي است، اما در استايل دهي گروهي رنگ نسبت داده شده به آن سفيد است، به همين دليل رنگ فونت انتخابي براي آن سفيد خواهد بود. مهم نيست که در دستورات قبلي  100 بار رنگ آبي به h2 نسبت داده شود پرا که آخرين دستور  css رنگ سفيد را به اين تگ نسبت مي دهد.

 

استايل دهي به لينک ها:

 

لينک ها در سراسر دنياي وب وجود دارند، اگر به لينک هاي اوليه با استايل پيش فرض نگاهي بيندازيم مي بينيم که لينک ها داراي يک خط در زير نوشته لينک (underline)  هستند. به صورت پيش فرض مرورگرها از رنگ هاي زير براي لينک ها استفاده مي کنند:

آبي :    لينکي که مشاهده نشده باشد.

بنفش :  لينکي که شما آن را قبلا مشاهده کرده ايد.

قرمز:   لينکي که فعال است و شما در حال کليک کردن بر روي آن هستيد.

در بيشتر مواقع استايل دهي به لينک ها ممکن است به شکل زير باشد:

 

    A

     {

     font-weight: bold;

     color: black;

    }

 

همانطور که قبلا اشاره کرديم تا کنون يک نوع حالت براي لينک ها معرفي کرديم، لينک هاي مشاهده شده، لينک هاي فعال و لينک هايي که هنوز بر روي آنها کليک نشده است، اما نوع چهارمي وجود دارد که hover ناميده مي شود، اين حالت براي وقتي است که نشانه گر موس بر روي لينک مي آيد که با استايل دهي در css نيز ميتوان خصوصيات اين لينک را نيز تغيير داد.

در اينجا به برخي از استايل هايي که مي توان به لينک ها داد نگاهي مي اندازيم:

 

 

    a {

     font-weight: bold;

     }

     a:link {

     color: black;

    }

    a:visited {

     color: gray;

    }

    a:hover {

     text-decoration: none;

     color: white;

     background-color: navy;

    }

    a:active {

     color: aqua;

     background-color: navy;

    }

 

 

design-web-114.jpg

 

  عکس بالا کليه حالت هاي مختلف لينک ها را نشان مي دهد و حالت hover آن لينک تماس با ما  (contact us) است. تمامي رنگ هاي پيش زمينه و ساير رنگ هاي ديگر را مي توانيد با css  ايجاد کنيد و مي توانيد افکت هاي بسيار جذابي مانند آن چيزي که در بخش فوتر سايت وب اسکالا مشاهده نماييد ايجاد کنيد.

 

پاک کردن پيشينه مرورگر:

 

مرورگرها به صورت پيش فرض مقداري از پيشينه صفحات وب سايت را در خود ذخيره مي کنند و از اين اطلاعات استفاده مي کنند که بدانند آيا لينکي بازديد شده است يا نه، اما اين کار براي زمانيکه طراح وب سايت در حال تست کردن صفحه سايتي است کمي مشکل ساز مي شود به خصوص وقتي که طراح مي خواهد لينکي که بازديد نشده است را استايل بدهد، اما چون صفحه سايت را چندين بار refresh  کرده مرورگر وي به اصطلاح cache  کرده و به همين دليل لينک هاي بازديد نشده را بازديد شده مي پندارد که به همين دليل مي بايست cache يا اطلاعات ذخيده شده را پاک کرد. براي اين منظور به اين صورت عمل مي کنيم:

در مرورگر اينترنت اکسپلورر : تب  tools راانتخاب کرده، inteet option  را کليک مي کنيد، زير browser history دکمه delete  را بزنيد، در پنجره باز شده check box مربوط به history  را فعال کنيد، انتخاب ساير گرينه ها با توجه به نظر خودتان مي تواند صورت گيرد. در نهايت دکمه delete  را زده و پنجره inteet option را ok ميکنيم تا بسته شود و cache مرورگرمان پاک شود.

 

design-web-113.jpg

 

ساير مرورگرها نيز روشي مشابه دارند که آدرس دسترسي به history  آنها نيز به صورت زير است:

 

    Tools > Options يا   Preferences > Privacy

 

 

 

کلاس هاي انتخابگر  :

 

تا اينجا ياد گرفتيم که چگونه در يک فايل CSS خصوصيات مختلفي براي تگها بنويسيم و آموختيم که ميتوان خصوصيات يک کلاس را براي تگهاي مختلفي اعمال کرد يعني ميتوان کلاس را چندين بار استفاده کرد. به عنوان مثال بياييد کلاس زير را دريک پاراگراف اعمال کنيم :

 

    .fun {

    color: #339999;

    font-family: Georgia, Times, serif;

    letter-spacing: 0.05em;

    }

 

 

به اين ترتيب 3 خصوصيت براي پاراگرافمان تعريف کرده ايم،که خصوصيت سوم letter-spacing  به معناي اينست که فاصله بين کلمات موجود درمتن 0.05em باشد. (اگرارتفاع حرف M رابرابربا em1 درنظربگيريد 5% اين مقدار برابر با 0.05em خواهد بود).

حال براي اين که اين خصوصيات که در css نوشتيم برروي پاراگراف مدنظر اعمال شود کافيست که نام کلاس موجود در css رابه تگ مورد نظ مان درصفحه html نسبت دهيم:

 

    <p class="fun">

    A man walks into a bar; you would've thought he'd see it coming!

    </p>

 

 

حال در نظربگيريد تگ  <blockquote>درون صفحه html تان وجود دارد و درون اين تگ ميخواهيد يک پاراگراف قرار دهيد که کلاس fun داشته باشد ، همانند کد زير:

 

    <blockquote>

    <p class="fun">

        Happiness is a dip in the ocean followed by a

        int or two of Old Speckled Hen. You can quote me on that!"

    </p>

    </blockquote>

 

 

به نظر شما اگر بخواهيد چند پاراگراف درون اين تگ قراردهيد چه کارميتوان کرد؟ ميتوان راه حل زير را اعمال کرد:

 

    <blockquote>

    <p class="fun">"Happiness is a dip in the ocean followed by a pint or two of Old Speckled Hen. You can quote me on that! </p>

    <p class="fun">"Join us for a weekend away at some of our favorite dive spots and you'll soon be making new friends. </p>

    <p class="fun">"Anyway, about time I got on with some <em>proper</em> work!" </p>

    </blockquote>

 

 

اما همانطور که مي بينيد تکرار نام کلاس در تگها ي بالا زياد صورت گرفته ، پس به جاي استفاده از روش بالا ميتوان روش بهتري را به کار برد   :

 

    <blockquote class="fun">

    <p Happiness is a dip in the ocean followed by a pint or two of Old Speckled Hen. You can quote me on that! </p>

    <p>"Join us for a weekend away at some of our favorite dive spots and you'll soon be making new friends. </p>

    <p>"Anyway, about time I got on with some <em>proper</em> work!" </p>

    </blockquote>

 

 

ID & CLASS

 

ياد گرفتيد که چگونه ميتوان از ID  و کلاس براي تگهاي موجود در HTML خود استفاده نماييد ، به عنوان مثال براي کلاس از نماد "." قبل از نام کلاس در نظر گرفته شده در فايل سي اس اس استفاده مي کنيم و براي ID از نماد "#" .

نکته از مترجم : دقت نماييد براي استايل دهي هم از کلاس استفاه ميشود و هم از ID. اما تفاوت هايي هم در استفاده دارد وآن اينکه از ID  براي استايل دهي و مشخص کردن عناصر اصلي صفحه مانند هدر  فوتر و منو و غيره استفاده ميکنيم و يا براي استفاده در موارد برنامه نويسي .

تنها نکته در اين باره اين است که در يک صفحه HTML از نام يک ID  فقط مي شود يکبار استفاده نمود اما از نام يک کلاس مي توان به هر تعداد استفاده کرد.

 

بدين ترتيب چنانچه کلاس fun درون تگ  blockquote قرار گيرد خصوصيت italic  را نيز مي خواند ، اما اگر به ساير تگ هايي که مي خواهيم تنها کلاس fun را بخوانند تگ blockquote را قرار ندهيم خصيصه italic  شدن فونت اعمال نمي شود.

 

براي روشن تر شدن اين موضوع مثال ديگري مي زنم:

فرض کنيد مي خواهيم تمامي متون قرار گرفته درون تگ  p صفحه مان به رنگ آبي نفتي درآيند بنابراين کافيست که در CSS بنويسيم :

 

    p {

    color: navy;

    }

 

 

اما حالا اگر بخواهيم يکي از متون قرار گرفته درون تگ p مان به رنگ ديگري درآيد کافيست ، به اين تگ p يه کلاس بدهيم و سپس به آن کلاس رنگ مورد نظرمان را نسبت دهيم:

 

    .p.gre {

    color: green;

    }

 

 

استايل دهي قسمتي از متن با استفاده از span  :

 

فرض کنيد که چنين متني داريد:

 

    <p>Bubble Underis a group of diving enthusiasts based in the south-west UK who meet up for diving trips in the summer months when the weather is good and the bacon rolls are flowing. We arrange weekends away as small groups to cut the costs ofaccommodation and travel and to ensure that everyone gets a trustworthy dive buddy.</p>

 

 

و مي خواهيد دو کلمه اول اين متن يعني Bubble Underis  به صورت bold  (پر رنگ) نمايش داده شود. براي اين کار براي اين کلمات يک تگ span به کار مي بريم و سپس به اين span استايل ديگري را اعمال مي کنيم و آن را آبي رنگ مي کنيم:

 

    <p><span class=" blue ">Bubble Under</span> is a group of diving enthusiasts based in the south-west UK who meet up for diving trips in the summer months when the weather is good and the bacon rolls are flowing. We arrange weekends away as small groups to cut the costs ofaccommodation and travel and to ensure that everyone gets a trustworthy dive buddy.</p>

    .blue

    {

    Color: # a3c2fa;

    }

 

 

استايل دهي عناصر با استفاده از css

 

 طي سالهاي گذشته توسعه دهندگان وب سايت با استفاده  از css تنها مي توانستند به متون موجود در سايت استايل بدهند و در پاره اي از مواقع رنگي را به متني اختصاص مي دادند، اين تنها کاري بود که مي شد با استفاده ازcss انجام داد چون در آن زمان مرورگر ها بسيار ضعيف بود و نمي توانستند خصوصيات بيشتري از css  را پشتيباني کنند. اما با گذشت زمان اين امر ميسر شد و مرورگر ها پيشرفت کردند.

در اين فصل به بررسي زواياي ديگري از css مي پردازيم و امکانات بيشتري از آن را معرفي مي کنيم. از جمله:

تغيير ظاهر و اندازه فضاي مشخصي از وب سايت

تغيير پس زمينه و کناره هاي اشکال

موقعيت عناصر در هر جاي صفحه وب سايت

 

قبل از شروع کار، ابتدا براي ايجاد تغيير در ظاهر و اندازه عناصر در وب سايت مي بايست با مفهوم block-level elements  و inline elements آشنا شويد.

 

block-level elements  و inline elements

 

block-level elements:  به عناصر يا تگ هايي مي گوييم که توسط آن مي توان کل سطر يا فضايي که آن عنصر در اختيار خود دارد را  مسدود يا به اصطلاح block کرد، هر عنصر block  مي تواند درون خود عنصر و يا عناصر inline و يا block  را جاي دهد.

 

inline elements : به عناصر يا تگ هايي مي گويند که آنها تنها مي توانند به اندازه متني که درون آن جاي گرفته قسمتي از سطر را اشغال نمايند، اين عناصر خطي يا به اصطلاح inline ناميده مي شوند، توجه داشته باشيد که درون تگ هاي inline تنها عنصر Inline جاي ميگيرد.

نحوه تشخيص عناصر  inline  بدين صورت است که اگر عنصري دوم در کنار عنصر اول در امتداد يک خط قرار گيرند عنصر اول قطعا inline است، اما اگر عنصر اول  block باشد عنصر دوم در بالا يا پايين عنصر اول قرار خواهد گرفت و نه در امتداد عنصر اول.

 

در اينجا چند عنصر block را معرفي مي کنيم:

 

تگ هاي h1, h2,...و h6

P

div

Blockquote

Ul  و  ol

Form

 

وقتي که شما يک پاراگراف ايجاد مي کنيد، نيازي نيست که بعد از پايان پاراگراف اول با استفاده از <br /> به خط بعد برويد تنها کافيست يک تگ<p> را باز کرده متن خود را بنويسيد و سپس آن تگ را ببنديد.</p>

بذين ترتيب چون تگ p بلاک است خود به خود متني که در تگ دوم P  قرار مي گيرد از ابتداي سطر بعد شروع مي شود.

 

design-web-111.jpg

و خروجي آن را بدين صورت خواهيم داشت:

 

 design-web-116.jpg

 

ادامه دارد اگر مورد استقبال قرار گيرد!